<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" href="style/style.css"/>
		<script src="js/jquery-1.8.1.js" type="text/javascript"></script>
		<!-- Load CKEditor -->
		<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
	<h1>代码</h1>
	<h2>NAV</h2>
	<style>
	.nav{background-color:#FFF;}
	.nav li a{color:#666;text-decoration: none;font-weight:bold;padding:5px 10px;display:block;
		background-color:#ededed;border-width:1px;border-style: solid;border-color:#FFF #CCC #CCC #FFF;}
	.nav li.level1{float:left;position:relative;}
	.nav li.active{background-color:#CCC;}
	.nav li.hover .a1,.nav li.hover2 .a2{background-color:#CCC;color:#FFF;}
	.nav .ul2{position:absolute;background-color:#FFF;display:none;}
	.nav .hover .ul2{display:block;}
	.nav .ul2 .level2{}
	</style>
	<ul class='nav'>
		<li class='level1 active' onmouseover='$(this).addClass("hover");' onmouseout='$(this).removeClass("hover");'><a class='a1' href='#' title=''>首页</a></li>
		<li class='level1' onmouseover='$(this).addClass("hover");' onmouseout='$(this).removeClass("hover");'><a class='a1' href='#' title=''>首页2</a>
			<ul class='ul2'>
				<li class='level2' onmouseover='$(this).addClass("hover2");' onmouseout='$(this).removeClass("hover2");'>
					<a href='' class='a2'>二级菜单1</a>
				</li>
				<li class='level2' onmouseover='$(this).addClass("hover2");' onmouseout='$(this).removeClass("hover2");'>
					<a href='' class='a2'>二级菜单2</a>
				</li>
				<li class='level2' onmouseover='$(this).addClass("hover2");' onmouseout='$(this).removeClass("hover2");'>
					<a href='' class='a2'>二级菜单3</a>
				</li>
			</ul>
		</li>
		<li class='level1' onmouseover='$(this).addClass("hover");' onmouseout='$(this).removeClass("hover");'><a class='a1' href='#' title=''>首页3</a></li>
		<li class='level1' onmouseover='$(this).addClass("hover");' onmouseout='$(this).removeClass("hover");'><a class='a1' href='#' title=''>首页4</a></li>
		<li class='level1' onmouseover='$(this).addClass("hover");' onmouseout='$(this).removeClass("hover");'><a class='a1' href='#' title=''>首页5</a></li>
	</ul>
	<h2>常用doctype声明</h2>
	<div class='linkDiv'>
		<label>Link:</label>
		<a href='http://www.w3school.com.cn/html/html_doctype.asp' target='_blank'>http://www.w3school.com.cn/html/html_doctype.asp</a>
	</div>
	<h3>HTML5</h3>
	<pre>&lt;!DOCTYPE html&gt;</pre>
	<h3>HTML 4.01</h3>
	<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;</pre>
	<h3>XHTML 1.0</h3>
	<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
	<h2>CKEditor</h2>
	<div class='linkDiv'>
		<label>Link:</label>
		<a href='http://ckeditor.com/' target='_blank'>http://ckeditor.com/</a>
	</div>
	<textarea id="editor1" name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
	<script type="text/javascript">
	$(function (){	CKEDITOR.replace( 'editor1' ) });
	</script>
	<div class='linkDiv'>
		<label>More Samples:</label>
		<a href='ckeditor/_samples/index.html' target='_blank'>ckeditor/_samples/index.html</a>
	</div>
	<h2>fieldset</h2>
	<div class='linkDiv'>
		<label>Link:</label>
		<a href='http://www.w3school.com.cn/tags/tag_fieldset.asp' target='_blank'>link</a>
	</div>
	 <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  	</fieldset>
</body>
</html>